Multimedia

Wat is CSS?

Doelstelling

1. We beginnen met het kiezen van de juiste karakterset.
2. We leren hoe je bestanden upload naar Cloud9.
3. Het wordt tijd om de bloemlezing pagina op te maken. Opmaak betekent drie dingen:
   1. de juiste terminologie voor opmaak leren gebruiken;
   2. elementen positioneren:
      1. wireframe / mockup maken;
      2. wireframe / mockup omzetten naar html;
      3. een tabel van de te positioneren elementen maken;
   3. elementen aankleden met kleur, vorm, achtergrond, animatie enz.
4. In deze les leren we hoe je de verschillende onderdelen, body, header, article, aside, section enz. op de pagina positioneert.

Leerpad

1. Hoe je een karakterset instelt zie je in het filmpje De juiste karakterset instellen met behulp van de meta tag. Info hierover op meta tag.
2. Hoe je een bestand uploadt naar Cloud9 zie je in het filmpje Een bestand uploaden naar Cloud9.
3. Denken in sjablonen
   1. Een HTML sjabloon voor een detail artikel type pagina.
   2. Wireframes en/of mockups tekenen
   3. Filmpje: Wireframes tekenen in Word
4. CSS
   1. Algemeen
   2. Wat is CSS?
   3. Hoe schrijf ik het?
   4. Selectoren
      1. CSS type selector
      2. CSS klasse-selector
      3. CSS id-selector
      4. CSS universele selector
   5. Inline en block elementen
   6. Het CSS box model
   7. meten in CSS
   8. CSS - blokgrootte
   9. CSS - blokgrootte beperken
   10. CSS eigenschap: overflow
   11. CSS eigenschap: margin
   12. CSS eigenschap: padding
   13. CSS werken met kleur
   14. CSS eigenschap: border
   15. Natuurlijke flow van elementen op een pagina
   16. HTML elementen postioneren

Oefening

1. We vertrekken van de oefening Pagina header en hoofdnavigatie. Vind je op CodePen.
2. Maak een map met de naam css en kopieer alle bestanden uit de map html naar deze nieuwe map.
3. We maken een extern CSS bestand met de naam app.css in de submap css van de css map, dus css/css/app.css
4. We linken het bestand.
5. We maken een lijst met te positioneren elementen.
6. Met de universele selector stellen we de border-size in op border-box en alle kantlijnen en opvulsels op 0.
7. body en html % instellen
8. We beginnen met de containers te plaatsen en de grootte ervan te bepalen.
9. Vervolgens positioneren we de tekstelementen en geven er een grootte aan.
10. Dit is het resultaat tot zover:
11. Bekijk het filmpje: HTML elementen positioneren

Opdracht

1. Maak een map met de naam css en kopiëer daarin alle bestanden van uit de map met de naam html.
2. Maak de marsman.html pagina op zoals in de oefening hierboven
3. Vertrek van de marsman.html pagina en maak een gelijkaardige pagina met je eigen onderwerp (artikel), zowel HTML als CSS.
4. Maak een wireframe voor je eigen pagina.
5. Stel een tabel op met de te postioneren elementen en geeft de positie, hoogte, breedte en witruimte op.
6. Maak een extern css bestand met de naam style.css en plaats dat in een submap met de naam css (hoofdlettergevoelig!). Dus css/css/style.css.
7. Maak de stijlregels aan overeenkomstig de waarden in de tabel met de te positioneren elementen.
8. Stuur een Word document met de wireframe; een tabel met de lijst van de te postioneren elementen door.
9. Kopieer de map css van je lokale computer naar Cloud9.